<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件委托</title>
        <style type="text/css">
            h3 , p { text-align: center; }
            .tab { 
                margin: auto;
                width: 80vw;
                border: 1px solid blue; 
                /* 拆分单元格边框 */
                border-collapse: separate;
                /* 设置单元格间距 */
                border-spacing: 5px ;
            }
            .tab td {
                border: 1px solid blue ;
                height: 50px;
                width: 25%;
                overflow: hidden;
            }
            .tab td textarea {
                border: none;
                outline: none;
                width: 100%;
                height: 100%;
                resize: none ;
                background: #ffa;
            }
        </style>
    </head>
    <body>
        <h3>事件委托</h3>

        <table class="tab">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td>张三丰</td>
            </tr>
        </table>

        <script type="text/javascript">
            const tab = document.querySelector('.tab');

            // 定义监听器对象(必须有一个handleEvent函数)
            const listener = {
                handleEvent(evt){
                    // 阻止事件传播
                    evt.stopPropagation();
                    // 获取事件目标
                    const target = evt.target ;
                    // 如果事件目标是 TD 元素
                    if( target.nodeName === 'TD' ) {
                        // 先获取 td 元素内部的所有内容
                        let old = target.innerHTML;
                        // 清空 td 元素原有内容
                        target.innerHTML = '' ;
                        // 创建一个 textarea 元素
                        let ta = document.createElement('textarea');
                        // 将 td 中原有内容设置到 textarea  中
                        ta.value = old ;
                        // 将 textarea 元素添加到 td 元素内部
                        target.appendChild( ta );
                        // 让 textarea 自动获得焦点
                        ta.focus();
                        // 为 ta 绑定事件监听器
                        ta.addEventListener( 'blur' , handler , false );
                    }
                }
            }

            // 绑定鼠标左键双击(dblclick)事件监听器
            tab.addEventListener( 'dblclick' , listener , true );

            let handler = evt => {
                // 阻止事件传播
                evt.stopPropagation();
                // 获得事件目标
                let target = evt.target;
                // 若事件目标是 TEXTAREA 元素
                if( target.nodeName === 'TEXTAREA' ) {
                    // 获得 textarea 的父节点
                    let td = target.parentNode ;
                    // 获得 textarea 中的内容
                    let value = target.value ;
                    // 从 td 中移除 textarea 元素 
                    td.removeChild( target );
                    // 将 textarea 中的内容设置到 单元格中
                    td.innerHTML = value ;
                }
            }
        </script>

        <p>
            <a href="index.html">返回首页</a>
        </p>

    </body>
</html>